<template>
	<div class="wrapper">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="notic wrapbd">
			<ul>
				<router-link :to="{path:'noticeDetails',query:{id:item.id}}" tag="li" v-for="(item,index) in listAll" v-show="item.is_show == 1" :key="index">
					<div class="list-item">
						<span class="title">{{item.title}}</span>	
						<span class="summary">{{item.content}}</span>
						<span class="time">{{item.create_time | fmtDate}}</span>
					</div>
				</router-link>
				<p v-if="page != pageNum && listAll.length != 0" @click="onLoad">加载更多</p>
				<p v-if="page == pageNum || listAll.length == 0">没有更多数据</p>
			</ul>
		</div>
	</div>
</template>
<script>
	import HeadTitle from "./../../components/title.vue"
	export default {
		data(){
			return {
				headText: '公告信息',  //顶部标题
				listAll:[],
                pageSize:'',  //有多少条数据
                pageNum:'',  //总页数
                page:1,  //页数
			}
		},
		mounted(){
			this.initialize();  //默认拉取数据
		},
		methods:{
			//返回
			onClickLeft () { this.$router.go(-1)},
			//拉取数据
            initialize(){
                let _this = this;
				this.Tools.AXIOS({
                    url: 'notice/list',
                    success: function (res) {
						let result = res.data.data
                        _this.pageSize = result.pageSize;
                        _this.pageNum = result.pageNum;
                        _this.listAll.push(...result.list);
                    }
                })
			},
            //分页加载
            onLoad() {
                if(this.page < this.pageNum){
                    this.page++;
                    this.initialize(1); 
                }
            },
		},
		components: {
			HeadTitle
		},
	}
</script>
<style>
.notic{width: 100%; background: #fff; color: #212a32;overflow-x: hidden;height: 100%;position: relative;}
.notic ul li{display: block; font-size: .35rem;;padding: 15px 10px 42px 10px; line-height: 20px; border-bottom: solid 1px #ebebeb;}
.notic ul li:nth-last-of-type(1){ border-bottom: none;}
.notic ul li:before{ content:"●"; font-family:Arial;color:#f0544d; font-size:0.4rem; float:left;line-height:18px; display:inline-block;width:10px;}
.notic ul li.read:before{display: none;}
.notic ul li .list-item{padding-left: .5rem;}
.notic span.title{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;display: inline-block;width: 100%;}
.notic .summary{display: block;color: #aaafb6;font-size: .35rem; line-height: 20px; min-height: 40px; max-height: 30px; overflow:hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.notic .time{color: #aaafb6;float: right; padding-top: 10px; font-size: .32rem; padding-right: 10px;}
.notic p{ color: #ccc; padding: .35rem 0; text-align: center; border-top: 1px solid #F6F6F6;}
</style>